<template>
  <div>
    <header>
      <van-nav-bar title="搜索药品" left-text="返回" left-arrow @click-left="$router.back()" />
      <div class="search">
        <input
          type="text"
          pref="searchInput"
          placeholder="搜索药品"
          class="search-input"
          style="
            width: 80%;
            height: 80px;
            border-radius: 30px;
            border: 3px solid red;
            margin-left: 60px;
            margin-top: 20px;
            padding: 0 20px;
          "
          v-model="wc"
        />
      </div>
      <p
        style="
          width: 100px;
          height: 60px;
          border: none;
          color: #fe4a29;  
          border-radius: 20px;
          position: absolute;
<<<<<<< HEAD
          top: 185px;
          right: 170px;
=======
          top: 195px;
          right: 70px;
>>>>>>> 27920b45fbd00f3e3fdf302fa9a44aeeb8877af0
          font-weight: 500;
          font-size: 35px;
        "
        @click="search"
        class="search-btn"
      >
        搜索
      </p>
    </header>
    <main class="zhong">
      <h3>最近搜索</h3>
      <div v-for="(item, ind) in gosearch" :key="ind" @click="goToDetail(item.id)">
        <div class="tttl">
          <p>{{ item.title }}</p>
        </div>
      </div>
      <div class="hotss">
        <h4>热门搜索</h4>
        <p class="p1">消炎镇痛膏</p>
        <p class="p1">关节止痛膏</p>
        <p class="p1">华堂宁</p>
        <p class="p1">米诺迪尔腚</p>
        <p class="p1">他达拉非</p>
        <p class="p1">百乐眠</p>
      </div>
    </main>
    <footer>
      <div>
        <img
          src="../../assets//guahao_img/sss_03.png"
          alt=""
          style="width: 100%; height: 100%; margin-top: 30px; padding: 20px"
        />
      </div>
    </footer>
  </div>
</template>
<script lang="ts" setup>
import http from '../../utils/index'
import { ref } from 'vue'
import router from '@/router'

const gosearch = ref([])

const getsearch = async () => {
  await http.get('/api/shop').then((res) => {
    // gosearch.value = res.data
    // console.log(res.data.data.data);
  })
}

const goToDetail = async (id: string) => {
  router.push({ path: '/shopdetail/index.vue', query: { id: id } })
}
getsearch()
const wc = ref('')
const search = async (value: string) => {
  await http.get('/api/shop', { params: { title: wc.value } }).then((res) => {
    gosearch.value = res.data.data
    console.log(res.data.data)
  })
}
</script>
<style scoped lang="scss">
.bosss {
  padding: 20px 20px;
  width: 100%;
  height: 100%;
  padding: 40px 30px;
  margin-bottom: 20px;
}
.p1 {
  padding: 0 20px;
  height: 40px;
  background-color: #f6f6f6;
  border-radius: 15px;
  display: flex;
  justify-content: center;
  float: left;
  margin-top: 20px;
  margin-right: 20px;
}
/* .hotss{
    width: 100%;
    height: 100%;
    padding: 20px 0;
    margin-left: 20px;
} */
.tttl {
  padding: 0 20px;
  height: 40px;
  margin-top: 20px;
  background-color: #f6f6f6;
  margin-bottom: 20px;
  border-radius: 50px;
}
.zhong {
  padding: 20px 20px;
  margin-top: 20px;
}
</style>